<template>
  <div class="container">
    <form action="#">
      政策编号：<input type="text" placeholder="请输入政策编号" v-model="policyId" v-on:change="searchid()">
      政策类型：
      <select name="" id="" v-model="id" v-on:change="chooseSelect()">
        <option v-for="item in options" :key="item.id" :value="item.id">{{item.selectVal}}</option>
      </select><br>
      政策名称：<input type="text" placeholder="请输入政策名称" v-model="policyName" v-on:change="searchname()">
      活动状态：
      <select name="" id="" v-model="status" v-on:change="searchStatus()" >
        <option v-for="item in optionPro" :key="item.id" :value="item.id">{{item.statusName}}</option>
      </select>
    </form>
    <div>
      <el-table
        :data="policyData"
        :header-cell-style="headerStyle"
        :cell-style="isCenter"
        style="width: 90%;margin: 0 auto;">
        <el-table-column
          prop="activitiesId"
          label="政策编号"
          width="80">
        </el-table-column>
        <el-table-column
          prop="activitiesName"
          label="政策名称"
          width="80">
        </el-table-column>
        <el-table-column
          prop="policyId"
          label="政策类型"
          width="80">
          <template slot-scope="{row: {policyId}}">
            <span v-if="+policyId === 1">折扣</span>
            <span v-else-if="+policyId === 3">买赠</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="productName"
          label="活动产品"
          width="90"
          v-if="isShowProduct">
        </el-table-column>
        <el-table-column
          prop="productNumberReached"
          label="购买数大于"
          width="90"
          v-if="isFllGift">
        </el-table-column>
        <el-table-column
          prop="amountReached"
          label="达成金额"
          width="80"
          v-if="isCumulative">
        </el-table-column>
        <el-table-column
          prop="discountsRate"
          label="折扣率"
          width="80"
          v-if="isDiscounts">
        </el-table-column>
        <el-table-column
          prop="givePolicyName"
          label="赠送产品"
          width="90"
          v-if="isFllGift">
        </el-table-column>
        <el-table-column
          prop="giveProductsNumber"
          label="赠送数量"
          width="80"
          v-if="isFllGift">
        </el-table-column>
        <el-table-column
          prop="activitiesDescribe"
          label="描述"
          width="100">
        </el-table-column>
        <el-table-column
          prop="startDate"
          label="开始日期"
          width="90">
        </el-table-column>
        <el-table-column
          prop="endDate"
          label="结束日期"
          width="100">
        </el-table-column>
        <el-table-column
          prop="policyStatusName"
          label="活动状态"
          width="80">
        </el-table-column>
        <el-table-column
          prop="policyCode"
          label=""
          width="80"
          v-if="no">
        </el-table-column>
        <el-table-column
          prop="approvalStatusId"
          label="审核状态"
          width="80">
          <template slot-scope="{row: {approvalStatusId}}">
            <span v-if="+approvalStatusId === 1">审批中</span>
            <span v-else-if="+approvalStatusId === 2">通过</span>
            <span v-else>否决</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="deleteStatusId"
          label="下架"
          width="80"
          v-if="isDelete">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="申请人"
          width="70">
        </el-table-column>
        <el-table-column label="操作" width="100" v-if="isShowDelete">
          <template slot-scope="scope" >
            <el-button
              width="100"
              size="mini"
              type="danger"
              @click="deletePolicy(policyData[scope.$index].policyCode,policyData[scope.$index].policyId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="zpage">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'policyList',
  data () {
    return {
      isDiscounts: true,
      isFllGift: false,
      isCumulative: false,
      isShowProduct: true,
      isDelete: false,
      no: false,
      isShowDelete: true,
      options: [ { id: 1, selectVal: '折扣' }, { id: 2, selectVal: '买赠' } ],
      optionPro: [ { id: 2, statusName: '活动中' }, { id: 3, statusName: '已过期' } ],
      policyData: [],
      id: '1',
      status: 2,
      policyId: '',
      policyName: '',
      productName: '',
      editIndex: '',
      editRow: '',
      currentPage: 10,
      page: 1,
      zpage: 0,
      userId: 2
    }
  },
  created: function () {
    var data = {
      'page': this.page,
      'limit': 100
    }
    var param = this.$qs.stringify(data)
    window.console.log(param)
    this.$axios.post('queryFullGift', param, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
      window.console.log(response.data.data)
      this.policyData = response.data.data
      this.zpage = Math.ceil(this.policyData.length)
      window.console.log(this.zpage)
      for (var i = 0; i < this.policyData.length; i++) {
        // //时间
        this.policyData[i].startDate = this.formatDate(new Date(this.policyData[i].startDate))
        this.policyData[i].endDate = this.formatDate(new Date(this.policyData[i].endDate))
      }
    }).catch(function (error) {
      window.console.log(error)
    })
  },
  methods: {
    headerStyle () {
      return 'text-align:center'
    },
    isCenter () {
      return 'text-align:center'
    },
    chooseSelect: function () {
      // //显示的政策类型
      this.policyData = []
      window.console.log(this.id)
      if (this.id === 1) {
        this.isDiscounts = true
        this.isFllGift = false
        this.isCumulative = false
        this.isShowProduct = true
        var data1 = {
          'page': this.page,
          'limit': 100
        }
        var param1 = this.$qs.stringify(data1)
        this.$axios.post('queryDiscounts', param1, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
          window.console.log(response.data.data)
          this.policyData = response.data.data
          this.zpage = Math.ceil(this.policyData.length)
          for (var i = 0; i < this.policyData.length; i++) {
            // //时间
            this.policyData[i].startDate = this.formatDate(new Date(this.policyData[i].startDate))
            this.policyData[i].endDate = this.formatDate(new Date(this.policyData[i].endDate))
          }
        }).catch(function (error) {
          window.console.log(error)
        })
      } else if (this.id === 2) {
        this.isDiscounts = false
        this.isFllGift = true
        this.isCumulative = false
        this.isShowProduct = true
        var data2 = {
          'page': this.page,
          'limit': 100
        }
        var param2 = this.$qs.stringify(data2)
        this.$axios.post('queryFullGift', param2, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
          window.console.log(response.data.data)
          this.policyData = response.data.data
          this.zpage = Math.ceil(this.policyData.length)
          for (var i = 0; i < this.policyData.length; i++) {
          // //时间
            this.policyData[i].startDate = this.formatDate(new Date(this.policyData[i].startDate))
            this.policyData[i].endDate = this.formatDate(new Date(this.policyData[i].endDate))
          }
        }).catch(function (error) {
          window.console.log(error)
        })
      }
    },
    btnSearch: function () {
      var searchId = this.policyId
      var searchPolicyName = this.policyName
      var searchProductName = this.productName
      window.console.log(searchId)
      window.console.log(searchPolicyName)
      window.console.log(searchProductName)
    },
    deletePolicy: function (id, type) {
      var DeleteData = {
        'page': this.page,
        'limit': 100,
        'userId': this.userId,
        'policyCode': id,
        'policyId': type,
        'deleteStatusId': 2
      }
      var deleteData = this.$qs.stringify(DeleteData)
      this.$axios.post('deletePolicy', deleteData, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
        window.console.log(response)
      }).catch(function (error) {
        window.console.log(error)
      })
    },
    searchid: function () {
      var Id = {
        'page': this.page,
        'limit': 100,
        'userId': this.userId,
        'activitiesId': this.policyId,
        'activitiesName': this.policyName,
        'policyStatusId': this.status
      }
      // // window.console.log(Id);
      var id = this.$qs.stringify(Id)
      this.$axios.post('queryDiscounts', id, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
        window.console.log(response)
        this.policyData = response.data.data
        this.zpage = Math.ceil(response.data.count)
      }).catch(function (error) {
        window.console.log(error)
      })
    },
    searchname: function () {
      var Name = {
        'page': this.page,
        'limit': 100,
        'userId': this.userId,
        'activitiesId': this.policyId,
        'activitiesName': this.policyName,
        'policyStatusId': this.status
      }
      window.console.log(Name)
      var name = this.$qs.stringify(Name)
      this.$axios.post('queryDiscounts', name, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
        window.console.log(response)
        this.policyData = response.data.data
        this.zpage = Math.ceil(response.data.count)
        if (response.data.code === '400') {
          this.$message({
            message: '无匹配信息',
            type: 'success'
          })
        }
      }).catch(function (error) {
        window.console.log(error)
      })
    },
    searchStatus: function () {
      if (this.status === 3) {
        this.isShowDelete = false
      } else if (this.status === 2) {
        this.isShowDelete = true
      }
      var Status = {
        'page': this.page,
        'limit': 100,
        'userId': this.userId,
        'activitiesId': this.policyId,
        'activitiesName': this.policyName,
        'policyStatusId': this.status
      }
      var status = this.$qs.stringify(Status)
      window.console.log(this.policyId)
      window.console.log(this.policyName)
      window.console.log(this.status)
      this.$axios.post('queryDiscounts', status, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
        window.console.log(response)
        this.policyData = response.data.data
        this.zpage = Math.ceil(response.data.count)
      }).catch(function (error) {
        window.console.log(error)
      })
    },
    handleSizeChange (newsize) {
      window.console.log(newsize)
      window.console.log(this.page)
      this.currentPage = newsize
      var sizeChange = {
        'page': this.page,
        'limit': 100,
        'userId': this.userId,
        'activities': this.policyId,
        'activitiesName': this.policyName,
        'policyStatusId': this.status
      }
      var size = this.$qs.stringify(sizeChange)
      this.$axios.post('queryDiscounts', size, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
        window.console.log(response)
        this.policyData = response.data.data
        this.zpage = Math.ceil(response.data.count)
      })
    },
    handleCurrentChange (newpage) {
      window.console.log(newpage)
      this.page = newpage
      var currentChange = {
        'page': this.page,
        'limit': 100,
        'userId': this.userId,
        'activities': this.policyId,
        'activitiesName': this.policyName,
        'policyStatusId': this.status
      }
      var current = this.$qs.stringify(currentChange)
      window.console.log(this.page)
      this.$axios.post('queryDiscounts', current, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
        window.console.log(response)
        this.policyData = response.data.data
        this.zpage = response.data.count
      })
    }
  }
}
</script>

<style scoped>
  form{
    width: 90%;
    margin: 0 auto;
    text-align: left;
  }
  input,select{
    width: 120px;
    height: 20px;
    margin-right: 50px;
    margin-bottom: 20px;
  }
  .el-dialog--center .el-select{
    width: 120px;
    height: 25px;
  }
  select{
    height: 28px;
  }
  i{
    padding: 0 16px;
  }
  .block{
    width: 90%;
    margin: 15px auto;
    text-align: left;
  }
</style>
